<template>
    <div class="setpass">
        <div class="set">
            <ul class="userlist">
                <li>
                    <span>
                        <img src="@/assets/imgs/register/dlmm.png" alt="">
                    </span>
                    <!-- <input type="password" placeholder="设置支付密码" v-model="postPassword.payPassword" @blur="passwordBlur"/> -->
                    <input type="password" placeholder="设置支付密码" v-model="postPassword.payPassword" />
                </li>
                <li>
                    <span>
                        <img src="@/assets/imgs/register/dlmm.png" alt="">
                    </span>
                    <!-- <input type="password" placeholder="确认支付密码" v-model="postPasswords.Passwords" @blur="passwordsBlur"/> -->
                    <input type="password" placeholder="确认支付密码" v-model="postPasswords.Passwords" />
                </li>
                <button class="confirmbtn" @click="getPass">确认</button>
            </ul>
        </div>
    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import http from "@/assets/js/axios"
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            userToken: '',
            postPassword: {
                payPassword: ''
            },
            postPasswords: {
                Passwords: ''
            }

        }
    },
    components: {

    },
    mounted() {
        var userToken = localStorage.getItem('token')
        this.userToken = userToken
        var that = this
        if (!userToken) {
            that.$router.push('/login')
        }
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 设置支付密码
        getPass: async function () {
            if (this.postPassword.payPassword && this.postPasswords.Passwords) {
                // if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.postPassword.payPassword)) {
                //     maskTips({ id: 'no-risk' + new Date().getTime(), txt: '设置密码格式不正确！' })
                //     console.log(444);
                // } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.postPasswords.Passwords)) {
                //     maskTips({ id: 'no-risk' + new Date().getTime(), txt: '确认密码格式不正确！' })
                //     console.log(555);
                // } else 
                if (this.postPassword.payPassword != this.postPasswords.Passwords) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '两次密码不相同，请重新输入' })
                    console.log(666);
                } else {
                    const res = await http.post('xshk/f/submit/pay/password?token=' + this.userToken, this.postPassword)
                    console.log(res);
                    if (res.data.code == 0) {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                        this.$router.go(-1)
                    } else {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    }
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请把必填数据填写完整，再提交！' })
                console.log(666);
            }

        },
        passwordBlur: async function () {
            const _this = this
            if (_this.postPassword.payPassword) {
                _this.passwordTips = false;
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(_this.postPassword.payPassword)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '设置密码格式不正确！' })
                }
            } else {
                _this.passwordTips = true;
            }
        },
        passwordsBlur: async function () {
            const _this = this
            if (_this.postPasswords.Passwords) {
                _this.passwordTips = false;
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(_this.postPasswords.Passwords)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '确认密码格式不正确！' })
                }
            } else {
                _this.passwordTips = true;
            }
        },
    }
}
</script>

<style lang='stylus' scoped>
.setpass {
    margin-top: 30px;

    .set {
        ul {
            width: 100%;
            height: 400px;
            padding: 0 10% 0 10%;
            font-size: 16px;

            li {
                height: 60px;
                line-height: 60px;
                width: 100%;
                border-bottom: 1px solid lightgrey;
                margin-bottom: 5px;

                span {
                    margin-top: 16px;
                    width: 20px;
                    height: 20px;
                    display: block;
                    float: left;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                input {
                    display: block;
                    height: 95%;
                    width: 50%;
                    float: left;
                    text-indent: 20px;
                    font-size: 16px;
                }

                #smssend {
                    float: right;
                    width: 119px;
                    height: 36px;
                    color: #fff;
                    font-size: 16px;
                    display: inline-block;
                    margin-top: 10px;
                    border: 1px solid #c2df5a;
                    border-radius: 5px;
                    background: #c2df5a;
                }
            }

            .confirmbtn {
                display: block;
                height: 50px;
                width: 100%;
                margin-top: 30px;
                border: 0;
                background: #c2df5a;
                color: #fff;
                font-size: 18px;
                border-radius: 5px;
            }
        }
    }
}
</style>
